<template>
    <div>
        <el-row class="row-with-margin">
            <el-col :span="24">
                <div>
                    <el-button type="primary" @click="addGoodsVisible = true">新增</el-button>
                    <el-button @click="batchUpdateStatus1">批量上架</el-button>
                    <el-button @click="batchUpdateStatus0">批量下架</el-button>
                    <el-button>导出</el-button>
                    <el-button>导入</el-button>
                </div>
            </el-col>
        </el-row>


        <el-row class="row-with-margin" style="margin-top: 0px;margin-bottom: 0px;">
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="创建日期">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" v-model="param.betweenTime">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="货物名称：" label-width="100px">
                        <el-input placeholder="请输入关键词搜索" style="width: 200px; margin-left: 10px;"
                            v-model="param.goodsName"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="queryBtn">查询</el-button>
                        <el-button style="margin-left: 10px;">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <div>
                    <el-table :data="tableData" style="width: 100%; margin-top: 20px;"
                    @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="goodsName" label="货物名称"></el-table-column>
                        <el-table-column prop="unit" label="单位"> </el-table-column>
                        <el-table-column prop="length" label="长(m)"></el-table-column>
                        <el-table-column prop="width" label="宽(m)"></el-table-column>
                        <el-table-column prop="height" label="高(m)"></el-table-column>
                        <el-table-column prop="volume" label="体积(m³)"></el-table-column>
                        <el-table-column prop="weight" label="重量(kg)"></el-table-column>
                        <el-table-column prop="value" label="价值(元)"></el-table-column>
                        <el-table-column prop="remarks" label="备注"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                <span :style="{ color: scope.row.status == 1 ? 'green' : 'red' }">
                                    {{ scope.row.status == 1 ? '上架' : '下架' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="text" size="medium" @click="updateGoodsBtn(scope.row)">编辑</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 1"
                                @click="updateStatus(scope.row, 0)">上架</el-button>
                                <el-button type="text" size="medium" :disabled="scope.row.status == 0"
                                @click="updateStatus(scope.row, 1)">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>


        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[1, 10, 20, 30, 50]" :page-size="pageSize"
                    :current-page="pageNum" :total="total" layout="total,sizes,prev, pager, next,jumper"
                    @next-click="nextPage" @prev-click="prevPage" @current-change="changePage"
                    @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>


        <!--        //新增弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增商品" :visible.sync="addGoodsVisible">
            <el-form>
                <el-form-item label="商品名称" label-width="80px">
                    <el-input v-model="addGoods.goodsName"></el-input>
                </el-form-item>

                <el-form-item label="单位" label-width="80px">
                    <el-input v-model="addGoods.unit"></el-input>
                </el-form-item>


                <el-form-item label="长" label-width="80px">
                    <el-input type="number" v-model="addGoods.length"></el-input>
                </el-form-item>

                <el-form-item label="宽" label-width="80px">
                    <el-input type="number" v-model="addGoods.width"></el-input>
                </el-form-item>

                <el-form-item label="高" label-width="80px">
                    <el-input type="number" v-model="addGoods.height"></el-input>
                </el-form-item>

                <el-form-item label="重量" label-width="80px">
                    <el-input type="number" v-model="addGoods.weight"></el-input>
                </el-form-item>

                <el-form-item label="价值" label-width="80px">
                    <el-input type="number" v-model="addGoods.value"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="addGoods.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addGoodsVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAddGoods">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //新增弹框结束----------------------------------------------------------------------------------------------------->


        <!--        //修改弹框开始----------------------------------------------------------------------------------------------------->
        <el-dialog title="新增商品" :visible.sync="updateGoodsVisible">
            <el-form>
                <el-form-item label="商品名称" label-width="80px">
                    <el-input v-model="updateGoods.goodsName"></el-input>
                </el-form-item>

                <el-form-item label="单位" label-width="80px">
                    <el-input v-model="updateGoods.unit"></el-input>
                </el-form-item>


                <el-form-item label="长" label-width="80px">
                    <el-input type="number" v-model="updateGoods.length"></el-input>
                </el-form-item>

                <el-form-item label="宽" label-width="80px">
                    <el-input type="number" v-model="updateGoods.width"></el-input>
                </el-form-item>

                <el-form-item label="高" label-width="80px">
                    <el-input type="number" v-model="updateGoods.height"></el-input>
                </el-form-item>

                <el-form-item label="重量" label-width="80px">
                    <el-input type="number" v-model="updateGoods.weight"></el-input>
                </el-form-item>

                <el-form-item label="价值" label-width="80px">
                    <el-input type="number" v-model="updateGoods.value"></el-input>
                </el-form-item>

                <el-form-item label="备注" label-width="80px">
                    <el-input v-model="updateGoods.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateGoodsVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUpdateGoods">确 定</el-button>
            </div>
        </el-dialog>
        <!--        //修改弹框结束----------------------------------------------------------------------------------------------------->
    </div>
</template>

<script>

export default {
    data() {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [],//表格对象
            multipleSelection: [],
            param: {},
            addGoodsVisible: false,
            updateGoodsVisible: false,
            addGoods: {},
            updateGoods: {},
        }
    },

    methods: {
        nextPage(val) {//当前页
            //下一页
            this.pageNum = val
            this.queryAllGoods()
        },
        prevPage(val) {//当前页
            //上一页
            this.pageNum = val
            this.queryAllGoods()
        },
        changePage(val) {
            //跳转页
            this.pageNum = val
            this.queryAllGoods()
        },
        sizeChange(val) {
            //改变每页条数
            this.pageNum = 1
            this.pageSize = val
            this.queryAllGoods()
        },
        // ---------------------------------------------分页方法分割线------------------------------------------------------------------------
        handleSelectionChange(val) {//点击批量删除复选框调用此方法
            this.multipleSelection = val
        },
        queryBtn() {//点击查询按钮调用该方法
            this.pageNum = 1
            this.queryAllGoods()
        },
        resetForm() { //重置按钮调用方法
            this.param = { betweenTime: [], goodsName: '' }
            this.queryAllGoods()
        },
        queryAllGoods() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/goods/queryAllGoods', pageParam)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.tableData = resp.data.data.list
                        this.total = resp.data.data.total
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        saveAddGoods() {
            this.$axios.post('api/goods/saveAddGoods', this.addGoods)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.addGoodsVisible = false
                        this.$message({
                            message: '商品添加成功!!!!',
                            type: 'success'
                        });
                        this.queryAllGoods()
                        this.addGoods = {}
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateGoodsBtn(val) {
            this.updateGoods = JSON.parse(JSON.stringify(val));
            this.updateGoodsVisible = true
        },
        saveUpdateGoods(){
            this.$axios.post('api/goods/saveUpdateGoods', this.updateGoods)
                .then(resp => {
                    console.log(resp.data);
                    if (resp.data.code === 200) {
                        this.updateGoodsVisible = false
                        this.queryBtn()
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.error('操作失败:', error);
                    this.$message.error('网络请求失败，请稍后再试');
                });
        },
        updateStatus(val, status) {
            const currentStatus = val.departmentStatus;
            const targetStatus = status;

            const message = targetStatus == 0 ? '是否上架该商品' : '是否下架该商品';
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求

                this.$axios.post('api/goods/updateStatus', val)
                    .then(resp => {
                        console.log(resp.data);
                        if (resp.data.code === 200) {
                            this.$message.success(targetStatus == 0 ? '上架成功' : '下架成功');
                            this.queryBtn();
                        }

                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        batchUpdateStatus1(){
            this.$confirm('是否确认要上架选中商品', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求
                this.$axios.post("/api/goods/batchUpdateStatus1", this.multipleSelection)
                    .then(resp => {
                        console.log(this.multipleSelection);
                        if (resp.data.code === 200) {
                            
                            this.$message({
                                message: '所选商品上架成功!!!!',
                                type: 'success'
                            });
                            this.queryBtn();
                        }
                        
                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        },
        batchUpdateStatus0(){
            this.$confirm('是否确认要下架选中商品', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确定再发送请求
                this.$axios.post("/api/goods/batchUpdateStatus0", this.multipleSelection)
                    .then(resp => {
                        console.log(this.multipleSelection);
                        if (resp.data.code === 200) {
                            
                            this.$message({
                                message: '所选商品下架成功!!!!',
                                type: 'success'
                            });
                            this.queryBtn();
                        }
                        
                    })
                    .catch(error => {
                        console.error('操作失败:', error);
                        this.$message.error('网络请求失败，请稍后再试');
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });
        }
    },
    created() {
        this.queryAllGoods()
    }
}
</script>

<style scoped>
.row-with-margin {
    margin-bottom: 20px;
    /* 根据需要调整间隙大小 */
}
</style>